/*
 * @Author: lusx
 * @Date: 2019-02-18 13:41:17
 * @Last Modified by:   lusx
 * @Last Modified time: 2019-02-18 13:41:17
 */

import { Card, Col, Row } from 'antd';

//任务状态统计卡片
class SumCard extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const {cardData=[],head=false,middle=false,foot=false} = this.props;
        return (
            <div className="g-sumCard" style={{padding:'20px',borderBottom:'1px solid #f7f7f7'}}>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4aopdp`} type="flex" justify="space-around">
                {
                  cardData.map((item,index)=>(
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@goetnm@${item.key}`} span={4} key={item.key}>
                      <Card ecId={`${this && this.props && this.props.ecId || ''}_Card@tw01aq@${item.key}`} title={item.title} bordered={middle===true?false:true}  bodyStyle={{textAlign:'center',margin:'-10px',color:'#868686'}}>
                        {
                          head && this.getHeadCard(item)
                        }
                        {
                          middle && this.getMiddleCard(item)
                        }
                        {
                          foot && this.getFootCard(item)
                        }
                      </Card>
                    </Col>
                  ))
                }
              </Row>
            </div>
        )
    }
    //获取页面头部卡片dom
    getHeadCard=(item)=>{
      return (
        <div className='wea-f14'>
          <div>{item.text}</div>
          <div dangerouslySetInnerHTML={{__html: `<div class="g-ckeditor-content">${item.num}</div>`}}/>
        </div>
      )
    }
    //获取页面中部卡片dom
    getMiddleCard=(item)=>{
      return (
        <div className='g-sumCard-weight wea-f14'>
          <div>{item.text}</div>
          <div style={{color:'#2db7f5'}}>{`${parseFloat(item.value).toFixed(2)}%`}</div>
        </div>
      )
    }
    //获取页面底部卡片dom
    getFootCard=(item)=>{
      return (
        <div>
          {
            item.data.map((d,index)=>{
              return (
                <div style={{marginTop:'5px',}} className='wea-f14'>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@vsakjn@${d.key}`} type="flex" justify='space-between' key={d.key}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9kc7cd@${d.key}`} ><div className='text-overflow'><div dangerouslySetInnerHTML={{__html: `<div class="g-ckeditor-content">${d.text}</div>`}}/></div></Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ue1rwn@${d.key}`} style={{color:'#2db7f5'}}><div dangerouslySetInnerHTML={{__html: `<div class="g-ckeditor-content">${d.num}</div>`}}/></Col>
                  </Row>
                </div>
              )
            })
          }
        </div>
      )
    }
}
export default SumCard;
